import { IFormProps, size, formItemLayout } from '../../utils/common';
import React from 'react';
import { Modal, Form, Input, Select } from 'antd';
import * as api from '../../api/api';
import { FormComponentProps } from 'antd/lib/form';
export interface AdminEditProps extends FormComponentProps {
    visible: boolean,
    admin?: api.SingleUserMallUsersVOAdminVO,
    roles?: Array<api.SingleUserMallRolesVORoleVO>,
    onSave: (any) => void,
    onCancel: () => void,
}
class AdminEdit extends React.PureComponent<AdminEditProps, any>{
    constructor(props) {
        super(props);
    }

    ok = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, form) => {
            if (!err) {
                this.props.onSave(form);
            }
        });
    }

    cancel = () => {
        this.props.onCancel();
    }

    render(): JSX.Element {
        const { getFieldDecorator } = this.props.form;
        const { admin, roles } = this.props;
        return (
            <Modal
                title='管理员信息'
                visible = {this.props.visible}
                onOk={this.ok}
                onCancel={this.cancel}
                maskClosable={true}
            >
                <Form>
                    <Form.Item label="用户名" {...formItemLayout}>
                        {getFieldDecorator('userName', {
                            rules: [
                                {
                                    required: true,
                                    message: '请输入用户名'
                                }
                            ],
                            initialValue: admin && admin.userName
                        })(<Input size={size}
                            placeholder="请输入用户名" />)}
                    </Form.Item>
                    <Form.Item label="昵称" {...formItemLayout}>
                        {getFieldDecorator('name', {
                            rules: [
                                {
                                    required: true,
                                    message: '请输入昵称'
                                }
                            ],
                            initialValue: admin && admin.name
                        })(<Input size={size}
                            placeholder="请输入昵称" />)}
                    </Form.Item>
                    {/* <Form.Item label="密码" {...formItemLayout}>
                        {getFieldDecorator('password', {
                            rules: [
                                {
                                    required: true,
                                    message: '请输入密码'
                                }
                            ],
                            initialValue: admin && admin.password
                        })(<Input size={size}
                            placeholder="请输入密码" />)}
                    </Form.Item> */}
                    <Form.Item label="角色" {...formItemLayout}>
                        {getFieldDecorator('roleNames', {
                            initialValue: admin && admin.roleNames
                        })(<Select
                            mode="multiple"
                            placeholder="请选择角色"
                        >
                            {
                                roles && roles.map((role) => {
                                    return <Select.Option key={role.name}>{role.name}</Select.Option>
                                })
                            }
                        </Select>)}
                    </Form.Item>
                </Form>
            </Modal>)
    }
}

export default Form.create()(AdminEdit);